Day 1 HTML 基本標籤與結構 – 從零開始打造履歷網站雛型 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 1

Modern Web

Angular、React、Vue 三框架實戰養成：從零打造高品質前端履歷網站系列第 1 篇

Day 1 HTML 基本標籤與結構 – 從零開始打造履歷網站雛型

17th鐵人賽

Chiayu

2025-09-15 12:49:57

27 瀏覽

分享至

未來 30 天，我會帶大家從 HTML、CSS、TypeScript 最實用的，一路到 Angular、React、Vue 三大框架，最後完成一個 能放在履歷上的自我介紹網站。整個系列會以實作為主，因為我自己一開始學習也是喜歡慢慢一步一步看知識才實作，但發現這樣太慢了，而且學習不牢固，我們直接設定目標，補足必要基礎知識，就立刻動手吧！然後最後提醒一些注意的地方，我們出發！

今日目標

建立第一個 HTML 檔案
了解 HTML 的基本結構
認識最常用的標籤（例如 h1、p、img…）
用 HTML 做出一個「自我介紹履歷網站」

在開始之前建立你的第一個 HTML 網頁檔

如果你是第一次寫前端，請先照這幾步：

在電腦上任意地方（例如在新增資料夾）新增一個文字檔。
將檔案命名為 index.html，重點是附檔名要是 .html。
用文字編輯器打開（推薦 VS Code）。
把稍後的程式碼貼進去並存檔。
在瀏覽器（Chrome、Edge、Firefox 都可）裡直接打開 index.html，你就能看到結果。

基礎概念 HTML 文件的基本結構

下面是最小可用的 HTML：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的自我介紹</title>
</head>
<body>
  哈囉，我是 Chiayu
  我是一名全端工程師
</body>
</html>

重點說明：

<!DOCTYPE html>：宣告 HTML5 文件，避免瀏覽器用相容模式渲染。
<html lang="zh-Hant">：根元素，lang 對 SEO 與無障礙（螢幕閱讀器語系）很重要。
<head>：放「給瀏覽器與搜尋引擎看的資料」（編碼、頁面標題、SEO meta 等）。
<meta charset="UTF-8">：使用 UTF-8，避免中文亂碼。
<title>：分頁標題。
<body>：實際顯示在畫面上的內容。

螢幕擷取畫面 2025-09-01 233334.png

實作目標與頁面結構

我們先來大概設定要做的雛型，在寫任何程式碼前腦袋都要先有畫面

Header（標頭）：名字、職稱、導覽列
Main（主要內容）：自我介紹、技能、作品集
Aside（側邊欄）：聯絡方式、社群連結
Footer（頁尾）：版權或附註

為了達成上面結構，會用到以下語義化標籤，我們先有概念，等下實作：

header：頁面或區段的標頭，常放網站名稱或導覽列，就像文章開頭的抬頭
nav：導覽列（裡面通常是 ul/li/a），就像書的目錄，幫助你跳到不同章節
main：頁面唯一的主要內容，就像一本書的正文，整頁只能有一個
section：主內容的主題區塊（About、Skills、Projects…），就像章節分類
h1–h6：標題階層（通常整頁 1 個 h1），h1 最大、h6 最小，就像書名到小節標題
p：段落，顯示一般文字，會自動換行並留一點間距
img：圖片，alt 就像圖說，讓搜尋引擎和視障者也能理解圖片
blockquote：引用文本像是座右銘，通常會縮排，表示這不是你自己寫的話
ul/li：列表，會自動出現小圓點，適合條列技能或重點
article：獨立內容單元，像是一個作品介紹，可以單獨拿出來看也有意義
aside：補充資訊，例如聯絡方式，像雜誌邊欄的小資訊框
address：作者或組織的聯絡資訊，像名片一樣放 email、電話
footer：頁尾，通常放版權或附註，就像書的版權頁

實作 HTML 自我介紹履歷網站

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的自我介紹履歷網站</title>
</head>
<body>
  <!-- 網站標頭 -->
  <header>
    <h1>哈囉，我是 Chiayu</h1>
    <p>全端工程師｜持續學習與分享</p>
    <!-- 導覽列 -->
    <nav>
      <ul>
        <li><a href="#about">關於我</a></li>
        <li><a href="#skills">技能</a></li>
        <li><a href="#projects">作品</a></li>
        <li><a href="#contact">聯絡我</a></li>
      </ul>
    </nav>
  </header>

  <!-- 主內容 -->
  <main>
    <!-- 自我介紹 -->
    <section id="about">
      <h2>關於我</h2>
      <img src="me.jpg" alt="我的照片" width="200">
      <p>嗨，我是 Chiayu，一名全端工程師，專注於 Angular、TypeScript 與前後端架構設計。</p>
      <blockquote>「持續學習，讓自己比昨天更強。」</blockquote>
    </section>

    <!-- 技能 -->
    <section id="skills">
      <h2>技能 Skillset</h2>
      <ul>
        <li><strong>前端：</strong>Angular, React, Vue</li>
        <li><strong>後端：</strong> Node.js, Express</li>
      </ul>
    </section>

    <!-- 作品集 -->
    <section id="projects">
      <h2>作品集 Projects</h2>
      <article>
        <h3>寵物電商網站</h3>
        <p>使用 Angular + Node.js 開發，支援購物車與支付功能。</p>
      </article>
      <article>
        <h3>LINE Bot 預約系統</h3>
        <p>結合 LINE API，讓用戶能在時間段內預約服務。</p>
      </article>
    </section>
  </main>

  <!-- 側邊欄：聯絡資訊 -->
  <aside>
    <h2 id="contact">聯絡資訊</h2>
    <address>
      Email: <a href="mailto:chiayu123@gmail.com">chiayu123@gmail.com</a><br>
      GitHub: <a href="https://github.com/chiayu123">github.com/chiayu123</a><br>
      LinkedIn: <a href="https://linkedin.com/in/chiayu123">linkedin.com/in/chiayu123</a>
    </address>
  </aside>

  <!-- 頁尾 -->
  <footer>
    <p>&copy; 2025 Chiayu. All rights reserved.</p>
  </footer>
</body>
</html>

螢幕擷取畫面 2025-09-11 231935.png

螢幕擷取畫面 2025-09-11 231944.png

小心踩雷

把 <p> 當成「換行」用

誤解：以為 <p> 就是「下一行」。其實 <p> 是「段落」，前後有預設外距。
正確：段落用 <p>；段內換行用 <br>；區塊間距交給 CSS。

<!-- 正確：兩個段落 -->
<p>我是一名全端工程師。</p>
<p>擅長使用 Angular</p>

<!-- 正確：同一段內強制換行才用 <br> -->
<p>機<br></p>

在 <p> 裡放區塊元素（誤用）

p 只能包含文字與行內元素，不能放 div、section、h2 等。
正確：把區塊元素放在 p 外面。

<!-- 誤用 -->
<p><h2>關於我</h2></p>

<!-- 正確 -->
<h2>關於我</h2>
<p>我是一名前端工程師...</p>

把 <span> 當容器使用（誤用）

span 是行內元素，不能充當大區塊容器；排版會失控。
正確：容器用區塊元素（如 div、section、article），span 僅包小段文字。

<!-- 正確 -->
<section>
  <h2>技能</h2>
  <p>熟悉 <span>Angular</span> 與 <span>TypeScript</span>。</p>
</section>

把 <a> 當按鈕或 <button> 當連結（誤用）

原則：導頁用 <a href="...">；觸發動作（送表單/開關面板）用 <button>。
不要彼此巢狀；不要把 a 當作沒有 href 的假按鈕。

<!-- 正確：導到 GitHub -->
<a href="https://github.com/你的帳號">我的 GitHub</a>

<!-- 正確：觸發動作 -->
<button type="button">展開更多</button>

ul/ol 的直接子元素不是 li（誤用）

列表一定是 ul/ol > li，不要塞 div 或 p 當直屬子節點。

<!-- 正確 -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>TypeScript</li>
</ul>

圖片 alt 寫檔名或完全省略（誤用）

原則：alt 描述圖片的用途或內容；純裝飾圖用 alt=""。
不要重複周圍文字；不要放「IMG_1234.jpg」。

<!-- 內容有意義：寫出意圖 -->
<img src="me.jpg" alt="Chiayu 的個人照片">

<!-- 純裝飾：留空 -->
<img src="divider.svg" alt="">

把 <br>/  當成排版工具（誤用）

換段落請用 <p>；區塊間距請寫 CSS margin。<br> 只用於段內換行（地址、詩歌）。

section 當作純樣式容器（誤用）

section 應代表有主題的內容，建議有標題（如 h2）。純容器用 div。

<section>
  <h2>作品集</h2>
  <!-- 內容 -->
</section>

article 與 section 混用（常見）

article：可獨立存在並可對外重用（如單篇作品、貼文）。
section：主題群組。作品清單用 section，單個作品介紹用 article。

address 放一般地址或公司介紹（誤用）

address 僅用於作者/組織的聯絡資訊（email、電話、社群）；一般地點介紹不要用 address。

表單沒有 label 對應（誤用）

placeholder 不是標籤；務必用 label for 對應 input id，可存取性與點擊體驗都更好。

<label for="email">Email</label>
<input id="email" type="email" placeholder="name@example.com">

用表格 <table> 做版面（誤用）

表格只用於表格資料；如果真的用表格，記得 th、thead、tbody 與 scope。

圖片沒有尺寸（造成版面跳動）

建議設定 width/height 屬性或用 CSS 保留比例盒，避免 CLS。

<img src="me.jpg" alt="Chiayu 的個人照片" width="200" height="200">

一頁多個 main 或完全沒有 main

main 一頁只能一個；確保主要內容都包在裡面，協助輔助工具正確跳轉。

Day 2 預告

明天開始用 CSS / SCSS 美化這個骨架：導覽列橫向排列、照片置中、技能做成卡片、頁尾固定在底部，並建立你的第一套 Design Tokens（色彩、字體、間距）。

Day 2 CSS / SCSS 入門 – 美化履歷網站雛型

系列文

Angular、React、Vue 三框架實戰養成：從零打造高品質前端履歷網站共 3 篇

RSS系列文訂閱系列文

1 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

7261 篇

完賽人數

87 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 17th鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react

IT邦幫忙

Angular、React、Vue 三框架實戰養成：從零打造高品質前端履歷網站系列 第 1 篇